<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格员信息管理 - 用户地址数据系统</title>
    <link rel="stylesheet" href="relation-styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="frame-integration.js"></script>
    <style>
        .dashboard-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .stats-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            padding: 20px;
            flex: 1;
            min-width: 230px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .stats-icon {
            width: 55px;
            height: 55px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }
        
        .stats-icon-pending {
            background-color: #fff8e1;
            color: #ff9800;
        }
        
        .stats-icon-approved {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        .stats-icon-rejected {
            background-color: #ffebee;
            color: #f44336;
        }
        
        .stats-icon-total {
            background-color: #e3f2fd;
            color: #2196f3;
        }
        
        .stats-content {
            flex: 1;
        }
        
        .stats-number {
            font-size: 24px;
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .grid-profile {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 25px;
            overflow: hidden;
        }
        
        .profile-header {
            background-color: #f5f7fa;
            padding: 25px;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #2196f3;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 42px;
            font-weight: 500;
        }
        
        .profile-info {
            flex: 1;
        }
        
        .profile-name {
            font-size: 24px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .profile-meta {
            color: #707070;
            margin-bottom: 15px;
        }
        
        .profile-status {
            display: inline-block;
            padding: 4px 12px;
            background-color: #e3f2fd;
            color: #2196f3;
            border-radius: 20px;
            font-size: 14px;
        }
        
        .profile-actions {
            display: flex;
            gap: 10px;
        }
        
        .profile-body {
            padding: 25px;
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
        }
        
        .profile-section {
            flex: 1;
            min-width: 300px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 15px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .info-label {
            color: #707070;
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .info-value {
            margin-bottom: 15px;
        }
        
        .responsibility-list {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 25px;
            overflow: hidden;
        }
        
        .responsibility-header {
            background-color: #f5f7fa;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .responsibility-title {
            font-size: 18px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .responsibility-body {
            padding: 0;
        }
        
        .responsibility-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .responsibility-table th,
        .responsibility-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .responsibility-table th {
            background-color: #f9fafb;
            color: #707070;
            font-weight: 500;
            font-size: 14px;
        }
        
        .responsibility-table tr:last-child td {
            border-bottom: none;
        }
        
        .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .badge-street {
            background-color: #e3f2fd;
            color: #2196f3;
        }
        
        .badge-community {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        .tab-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 25px;
            overflow: hidden;
        }
        
        .tabs {
            display: flex;
            background-color: #f5f7fa;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .tab {
            padding: 15px 20px;
            cursor: pointer;
            font-weight: 500;
            color: #707070;
            position: relative;
        }
        
        .tab.active {
            color: #2196f3;
        }
        
        .tab.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #2196f3;
        }
        
        .tab-content {
            padding: 25px;
        }
        
        .tab-pane {
            display: none;
        }
        
        .tab-pane.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="title-section">
                <h1>网格员信息管理</h1>
                <p class="subtitle">管理网格员信息及其负责的街道和小区</p>
            </div>
            <div class="header-actions">
                <button class="btn btn-primary" onclick="navigateTo('pending-address-grid.html', '网格员审批')">
                    <i class="fas fa-tasks"></i> 审批工作台
                </button>
            </div>
        </header>
        
        <!-- 网格员个人信息 -->
        <div class="grid-profile">
            <div class="profile-header">
                <div class="profile-avatar">张</div>
                <div class="profile-info">
                    <div class="profile-name">张网格</div>
                    <div class="profile-meta">历下区 - 泉城路街道 | 工号: GW1001</div>
                    <div class="profile-status"><i class="fas fa-check-circle"></i> 在职</div>
                </div>
                <div class="profile-actions">
                    <button class="btn btn-default">
                        <i class="fas fa-edit"></i> 编辑信息
                    </button>
                    <button class="btn btn-primary">
                        <i class="fas fa-key"></i> 重置密码
                    </button>
                </div>
            </div>
            <div class="profile-body">
                <div class="profile-section">
                    <div class="section-title">
                        <i class="fas fa-user"></i> 基本信息
                    </div>
                    <div>
                        <div class="info-label">姓名</div>
                        <div class="info-value">张网格</div>
                    </div>
                    <div>
                        <div class="info-label">性别</div>
                        <div class="info-value">男</div>
                    </div>
                    <div>
                        <div class="info-label">手机号码</div>
                        <div class="info-value">138****1234</div>
                    </div>
                    <div>
                        <div class="info-label">身份证号</div>
                        <div class="info-value">110****2345</div>
                    </div>
                </div>
                <div class="profile-section">
                    <div class="section-title">
                        <i class="fas fa-building"></i> 工作信息
                    </div>
                    <div>
                        <div class="info-label">所在区</div>
                        <div class="info-value">历下区</div>
                    </div>
                    <div>
                        <div class="info-label">所在街道</div>
                        <div class="info-value">泉城路街道</div>
                    </div>
                    <div>
                        <div class="info-label">岗位职责</div>
                        <div class="info-value">负责泉城路地区的地址审核和管理</div>
                    </div>
                    <div>
                        <div class="info-label">入职时间</div>
                        <div class="info-value">2023-01-15</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 统计信息 -->
        <div class="dashboard-summary">
            <div class="stats-card">
                <div class="stats-icon stats-icon-total">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">15</div>
                    <div class="stats-label">负责街道数</div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-icon stats-icon-pending">
                    <i class="fas fa-city"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">42</div>
                    <div class="stats-label">负责小区数</div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-icon stats-icon-approved">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">125</div>
                    <div class="stats-label">已通过地址数</div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-icon stats-icon-rejected">
                    <i class="fas fa-times-circle"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">18</div>
                    <div class="stats-label">已拒绝地址数</div>
                </div>
            </div>
        </div>
        
        <!-- 负责区域 -->
        <div class="responsibility-list">
            <div class="responsibility-header">
                <div class="responsibility-title">
                    <i class="fas fa-map-marked-alt"></i> 负责的街道和小区
                </div>
                <button class="btn btn-default">
                    <i class="fas fa-plus"></i> 添加负责区域
                </button>
            </div>
            <div class="responsibility-body">
                <table class="responsibility-table">
                    <thead>
                        <tr>
                            <th width="35%">名称</th>
                            <th width="15%">类型</th>
                            <th width="20%">所属区域</th>
                            <th width="15%">地址数量</th>
                            <th width="15%">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>泉城路街道</td>
                            <td><span class="badge badge-street">街道</span></td>
                            <td>历下区</td>
                            <td>245</td>
                            <td>
                                <button class="action-btn btn-view" onclick="viewAreaDetails('street', '001')">查看</button>
                                <button class="action-btn btn-default" onclick="removeResponsibility('street', '001')">移除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>恒大名都</td>
                            <td><span class="badge badge-community">小区</span></td>
                            <td>历下区泉城路街道</td>
                            <td>87</td>
                            <td>
                                <button class="action-btn btn-view" onclick="viewAreaDetails('community', '101')">查看</button>
                                <button class="action-btn btn-default" onclick="removeResponsibility('community', '101')">移除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>文东花园</td>
                            <td><span class="badge badge-community">小区</span></td>
                            <td>历下区泉城路街道</td>
                            <td>56</td>
                            <td>
                                <button class="action-btn btn-view" onclick="viewAreaDetails('community', '102')">查看</button>
                                <button class="action-btn btn-default" onclick="removeResponsibility('community', '102')">移除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>解放路街道</td>
                            <td><span class="badge badge-street">街道</span></td>
                            <td>历下区</td>
                            <td>198</td>
                            <td>
                                <button class="action-btn btn-view" onclick="viewAreaDetails('street', '002')">查看</button>
                                <button class="action-btn btn-default" onclick="removeResponsibility('street', '002')">移除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>泉城社区</td>
                            <td><span class="badge badge-community">小区</span></td>
                            <td>历下区解放路街道</td>
                            <td>65</td>
                            <td>
                                <button class="action-btn btn-view" onclick="viewAreaDetails('community', '103')">查看</button>
                                <button class="action-btn btn-default" onclick="removeResponsibility('community', '103')">移除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 标签页区域 -->
        <div class="tab-container">
            <div class="tabs">
                <div class="tab active" onclick="switchTab('pending')">待审核地址</div>
                <div class="tab" onclick="switchTab('approved')">已审核地址</div>
                <div class="tab" onclick="switchTab('activity')">操作日志</div>
            </div>
            
            <div class="tab-content">
                <!-- 待审核地址标签页 -->
                <div class="tab-pane active" id="pending">
                    <table class="address-table">
                        <thead>
                            <tr>
                                <th>标准地址</th>
                                <th width="120px">提交日期</th>
                                <th width="100px">状态</th>
                                <th width="100px">优先级</th>
                                <th width="120px">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="task-address">历下区泉城路街道泉城社区恒大名都12号楼3单元8层802室</div>
                                </td>
                                <td class="date-cell">2025-03-20</td>
                                <td><span class="status-pill status-pending"><i class="fas fa-clock"></i> 待审核</span></td>
                                <td><span class="priority-badge priority-high">高优先级</span></td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1001', '地址详情')">查看</button>
                                    <button class="action-btn btn-primary" onclick="navigateTo('pending-address-approve.html?id=1001', '审批地址')">审批</button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="task-address">历下区解放路街道解放社区文东花园一区5号楼2单元11层1102室</div>
                                </td>
                                <td class="date-cell">2025-03-19</td>
                                <td><span class="status-pill status-pending"><i class="fas fa-clock"></i> 待审核</span></td>
                                <td><span class="priority-badge priority-medium">中优先级</span></td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1002', '地址详情')">查看</button>
                                    <button class="action-btn btn-primary" onclick="navigateTo('pending-address-approve.html?id=1002', '审批地址')">审批</button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="task-address">历下区泉城路街道泉城社区文化路小区7号楼1单元4层401室</div>
                                </td>
                                <td class="date-cell">2025-03-18</td>
                                <td><span class="status-pill status-pending"><i class="fas fa-clock"></i> 待审核</span></td>
                                <td><span class="priority-badge priority-low">低优先级</span></td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1003', '地址详情')">查看</button>
                                    <button class="action-btn btn-primary" onclick="navigateTo('pending-address-approve.html?id=1003', '审批地址')">审批</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="view-more-link">
                        <a href="pending-address-list.html" onclick="navigateTo('pending-address-list.html', '待审核地址'); return false;">
                            查看全部待审核地址 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 已审核地址标签页 -->
                <div class="tab-pane" id="approved">
                    <table class="address-table">
                        <thead>
                            <tr>
                                <th>标准地址</th>
                                <th width="120px">审核日期</th>
                                <th width="100px">状态</th>
                                <th width="200px">审批意见</th>
                                <th width="80px">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="task-address">历下区解放路街道解放社区文东花园一区5号楼2单元11层1102室</div>
                                </td>
                                <td class="date-cell">2025-03-17</td>
                                <td><span class="status-pill status-approved"><i class="fas fa-check-circle"></i> 已通过</span></td>
                                <td>符合实地核查结果</td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1004', '地址详情')">查看</button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="task-address">历下区泉城路街道泉城社区恒大名都12号楼3单元8层802室</div>
                                </td>
                                <td class="date-cell">2025-03-16</td>
                                <td><span class="status-pill status-rejected"><i class="fas fa-times-circle"></i> 已拒绝</span></td>
                                <td>小区名称与实际不符</td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1005', '地址详情')">查看</button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="task-address">历下区泉城路街道泉城社区文化路小区7栋1单元4楼401</div>
                                </td>
                                <td class="date-cell">2025-03-15</td>
                                <td><span class="status-pill status-approved"><i class="fas fa-check-circle"></i> 已通过</span></td>
                                <td>已修正门牌号格式</td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1006', '地址详情')">查看</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="view-more-link">
                        <a href="pending-address-list.html" onclick="navigateTo('pending-address-list.html?status=reviewed', '已审核地址'); return false;">
                            查看全部已审核地址 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 操作日志标签页 -->
                <div class="tab-pane" id="activity">
                    <div class="history-timeline">
                        <div class="history-item">
                            <div class="history-icon">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="history-content">
                                <div class="history-title">审核通过地址</div>
                                <div class="history-desc">历下区解放路街道解放社区文东花园一区5号楼2单元11层1102室</div>
                                <div class="history-date">2025-03-17 14:20:35</div>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div class="history-icon">
                                <i class="fas fa-times-circle"></i>
                            </div>
                            <div class="history-content">
                                <div class="history-title">审核拒绝地址</div>
                                <div class="history-desc">历下区泉城路街道泉城社区恒大名都12号楼3单元8层802室</div>
                                <div class="history-date">2025-03-16 11:05:43</div>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div class="history-icon">
                                <i class="fas fa-plus"></i>
                            </div>
                            <div class="history-content">
                                <div class="history-title">添加负责区域</div>
                                <div class="history-desc">添加了历下区解放路街道解放社区的管理权限</div>
                                <div class="history-date">2025-03-15 09:30:22</div>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div class="history-icon">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="history-content">
                                <div class="history-title">审核通过地址</div>
                                <div class="history-desc">历下区泉城路街道泉城社区文化路小区7栋1单元4楼401</div>
                                <div class="history-date">2025-03-15 15:45:18</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 切换标签页
        function switchTab(tabId) {
            // 更新标签页状态
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.classList.remove('active');
            });
            
            const clickedTab = Array.from(tabs).find(tab => tab.textContent.includes(tabId === 'pending' ? '待审核' : tabId === 'approved' ? '已审核' : '操作'));
            if (clickedTab) {
                clickedTab.classList.add('active');
            }
            
            // 更新内容区域
            const tabPanes = document.querySelectorAll('.tab-pane');
            tabPanes.forEach(pane => {
                pane.classList.remove('active');
            });
            
            const targetPane = document.getElementById(tabId);
            if (targetPane) {
                targetPane.classList.add('active');
            }
        }
        
        // 查看区域详情
        function viewAreaDetails(type, id) {
            console.log(`查看${type === 'street' ? '街道' : '小区'}详情，ID: ${id}`);
            // 实际项目中，这里应该跳转到对应的详情页面
            if (type === 'street') {
                alert('查看街道详情功能正在开发中');
            } else {
                alert('查看小区详情功能正在开发中');
            }
        }
        
        // 移除负责区域
        function removeResponsibility(type, id) {
            if (confirm(`确定要移除该${type === 'street' ? '街道' : '小区'}的管理权限吗？`)) {
                console.log(`移除${type === 'street' ? '街道' : '小区'}管理权限，ID: ${id}`);
                // 实际项目中，这里应该调用API移除权限
                alert('移除权限功能正在开发中');
            }
        }
        
        // 页面加载完成后执行初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('网格员信息管理页面加载完成');
            
            // 在实际项目中，这里应该根据用户ID加载网格员信息
            loadGridManagerData();
        });
        
        // 加载网格员数据
        function loadGridManagerData() {
            console.log('加载网格员数据');
            
            // 实际项目中，这里应该从API获取网格员数据
        }
        
        // 修改返回列表的跳转方式
        function backToList() {
            window.location.href = 'grid-manager-list.html';
        }
        
        // 修改查看网格详情的跳转方式
        function viewGridDetail(gridId) {
            window.location.href = 'grid-detail.html?id=' + gridId;
        }
    </script>
</body>
</html> 